<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>运单查询</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/oksub.css}">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body>
<div class="ok-body">
    <blockquote class="layui-elem-quote quoteBox">
         <form class="layui-form" lay-filter="searchForm">

            <div class="layui-inline">
                <label class="layui-form-label">运单编号</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="waybillId"
                           placeholder="请输运单编号"/>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">寄件区间</label>
                <div class="layui-input-block">
                    <select name="sendingId" id="sendingId" class="layui-select" lay-filter="sendingId"
                            lay-verify="required" lay-search="true">
                        <option value="">请选择寄件区间</option>
                        <option th:each="s:${sending}" th:value="${s.id}" th:text="${s.rangeName}"/>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">目的地</label>
                <div class="layui-input-block">
                    <select name="destId" id="destId" class="layui-select" lay-filter="destId" lay-verify="required"
                            lay-search="true">
                        <option value="">请选择目的区间</option>
                        <option th:each="spot:${spots}" th:value="${spot.id}" th:text="${spot.rangeName}"/>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">取件员</label>
                <div class="layui-input-block">
                    <select name="takerId" class="layui-select" lay-filter="takerId" lay-verify="required"
                            lay-search="true">
                        <option value="">请选择取件员</option>
                        <option th:each="pickup:${pickups}" th:value="${pickup.staffId}" th:text="${pickup.name}"/>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">收/寄手机号</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="senderPhonenumber"
                           placeholder="请输入"/>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">收件人</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="recipient"
                           placeholder="请输入"/>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">支付方式</label>
                <div class="layui-input-block">
                    <select name="paymentMethodId" class="layui-select" lay-filter="paymentMethodId"
                            lay-verify="required" lay-search="true">
                        <option value="">请选择支付方式</option>
                        <option th:each="payment:${payments}" th:value="${payment.dictId}"
                                th:text="${payment.dictItemName}"/>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>

            <div class="layui-inline">
                <input type="button" class="layui-btn" id="export" value="导出">
            </div>
        </form>
    </blockquote>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(["element", "jquery", "table", "form", "laydate", "okLayer", "layer",
        "okUtils", "okMock"], function () {
        var table = layui.table;
        var form = layui.form;
        layer = layui.layer;
        var laydate = layui.laydate;
        var okLayer = layui.okLayer;
        var okUtils = layui.okUtils;
        var okMock = layui.okMock;
        var $ = layui.jquery;

        laydate.render({
            elem: "#startTime",
            type: "datetime"
        });
        laydate.render({
            elem: "#endTime",
            type: "datetime"
        });
        okLoading.close($);
        var userTable = table.render({
            elem: '#tableId',
            url: "/api/waybill/list",
            limit: 20,
            page: true,
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            cols: [[{
                type: "checkbox",
                fixed: "left"
            }, {
                field: "waybillId",
                title: "运单编号",
                width: 100,
                sort: true
            }, {
                field: "createTime",
                title: "添加时间",
                width: 100
            }, {
                field: "destName",
                title: "目的地",
                width: 120
            }, {
                field: "networkName",
                title: "网点",
                width: 150
            }, {
                field: "takerName",
                title: "取件员",
                width: 150
            }, {
                field: "itemTypeName",
                title: "快件类型",
                width: 100
            }, {
                field: "paymentMethodName",
                title: "支付方式",
                width: 100
            }, {
                field: "transportMethodName",
                title: "运输方式",
                width: 100
            }, {
                field: "number",
                title: "数量",
                width: 100
            }, {
                field: "weight",
                title: "重量",
                width: 100
            }, {
                field: "totalMoney",
                title: "价格",
                width: 100
            }, {
                field: "collectionOnDelivery",
                title: "代收货款",
                width: 100
            }, {
                field: "recipient",
                title: "收件人",
                width: 100
            }, {
                field: "recipientProvince",
                title: "收件省",
                width: 100
            }, {
                field: "recipientCity",
                title: "收件市",
                width: 100
            }, {
                field: "recipientArea",
                title: "收件区",
                width: 100
            }, {
                field: "recipientPostcode",
                title: "邮政编码",
                width: 100
            }, {
                field: "recipientCompany",
                title: "公司",
                width: 100
            }, {
                field: "recipientAddress",
                title: "收件地址",
                width: 100
            }, {
                field: "senderName",
                title: "寄件人",
                width: 100
            }, {
                field: "senderPhonenumber",
                title: "寄件电话",
                width: 100
            }, {
                field: "senderIdcard",
                title: "寄件人身份证",
                width: 250
            }, {
                field: "province",
                title: "寄件人省",
                width: 100
            }, {
                field: "city",
                title: "寄件人市",
                width: 100
            }, {
                field: "area",
                title: "寄件人区",
                width: 100
            }, {
                field: "senderPost",
                title: "邮政编码",
                width: 100
            }, {
                field: "address",
                title: "寄件地址",
                width: 100
            }, {
                field: "remarks",
                title: "备注",
                width: 100
            }, {
                field: "volume",
                title: "体积",
                width: 100
            }, {
                field: "otherCharge",
                title: "其他费",
                width: 100
            }, {
                field: "insuranceCharge",
                title: "保价费",
                width: 100
            }, {
                field: "agentWaybillNumber",
                title: "转运单号",
                width: 100
            }, {
                field: "transportNetworkName",
                title: "目的网点",
                width: 100
            },
                {
                    title: "操作",
                    width: 250,
                    align: "center",
                    fixed: "right",
                    templet: "#operationTpl"
                }]],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });

        // form.on("submit(search)", function (data) {
        //     userTable.reload({
        //         where: data.field,
        //         page: {
        //             curr: 1
        //         }
        //     });
        //     return false;
        // });

        table.on("toolbar(tableFilter)", function(obj) {
            switch (obj.event) {
                case "batchEnabled":
                    batchEnabled();
                    break;
                case "batchDisabled":
                    batchDisabled();
                    break;
                case "batchDel":
                    batchDel();
                    break;
                case "add":
                    add();
                    break;
            }
        });


        table.on("tool(tableFilter)", function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.waybillId);
                    break;
                case "download":
                    download(data.url);
                    break;
            }
        });


        function edit(data) {
            var index = layui.layer.open({
                title: "编辑运单信息",
                type: 2,
                content: "/page/waybill/edit",
                success: function (layero, index) {
                    var body = layui.layer.getChildFrame('body', index);
                    //如果是编辑赋初始值
                    body.find("[name = 'waybillId']").attr("disabled", true);
                    body.find("#edit").val(JSON.stringify(data));
                    //form.render();
                    setTimeout(function () {
                        layui.layer.tips('点击此处返回运单列表',
                            '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                    }, 500)
                }
            })
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                layui.layer.full(index);
            })
        }

        function del(id) {
            layer.confirm('确定删除选中运单信息？', {
                icon : 3,
                title : '提示信息'
            }, function (index) {
                $.get("/api/waybill/delete", {
                    id: id
                    //将需要删除的员工编号作为参数传入
                }, function (data) {
                    if (data.code == 0) {
                        layer.msg("删除成功",{"icon":1});
                        userTable.reload(); //刷新表格数据（也即让table重新加载url）
                        layer.close(index);//关闭弹出框
                    } else {
                        layer.close(index);//关闭弹出框
                        layer.msg(data.msg, {
                            icon: 2
                        });
                    }

                })
            })
        }

        function download(url) {
            window.location.href = url;
        }

        //搜索事件
        $(".search_btn").click(function() {
            var  data= form.val("searchForm");
            alert(data)
            //刷新数据表格
            userTable.reload({
                //url:可以不填不填走默认
                where : data
            });

        });
    })
</script>


<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
    <!--这里如果有附件url就显示下载按钮反之则无-->
    {{#  if(d.url ==null || d.url == '' ){ }}

    {{#  }else { }}
    <a href="javascript:" title="下载附件" lay-event="download"><i class="layui-icon">&#xe601;</i></a>
    {{#  } }}
</script>


</body>
</html>
